<template>
  <div class="j-menu" :class="{ collapsed: collapse }">
    <div class="j-menu-inner scrollbar">
      <a-menu
        show-collapse-button
        @collapse="onCollapse"
        @menu-item-click="handleMenuItemClick"
        v-model:selected-keys="selectedKeys"
        v-model:open-keys="openKeys"
      >
        <j-menuitem :list="menuList"></j-menuitem>
      </a-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { IconHome, IconGithub } from "@arco-design/web-vue/es/icon";
import jMenuitem from "@/components/admin/menu/menuitem/index.vue";
import type { MenuItem } from "./index";
import { collapse, onCollapse } from "./index";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

const openKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);

const menuList = <MenuItem[]>[
  {
    title: "档案管理",
    name: "Person",
    icon: IconHome,
    children: [
      {
        title: "部门管理",
        name: "Employee",
        icon: "iconfont icon-gaodeditu",
      },
      // {
      //   title: "职位管理",
      //   name: "Position",
      //   icon: "iconfont icon-gaodeditu",
      // },
      {
        title: "宿舍管理",
        name: "Hotel",
        icon: "iconfont icon-gaodeditu",
      },
    ],
  },
  {
    title: "规则管理",
    name: "Rule",
    icon: IconHome,
  },
  {
    title: "明细汇总",
    name: "Details",
    icon: IconHome,
    children: [
      {
        title: "违规原始记录",
        name: "Record",
        icon: "iconfont icon-gaodeditu",
      },
      {
        title: "个人扣分明细",
        name: "PersonDetail",
        icon: "iconfont icon-gaodeditu",
      },
      {
        title: "宿舍扣分明细",
        name: "HotelDetail",
        icon: "iconfont icon-gaodeditu",
      },
      {
        title: "部门扣分明细",
        name: "OrgDetail",
        icon: "iconfont icon-gaodeditu",
      },
      {
        title: "个人扣分汇总",
        name: "PersonSumDetail",
        icon: "iconfont icon-gaodeditu",
      },
      {
        title: "宿舍扣分汇总",
        name: "HotelSumDetail",
        icon: "iconfont icon-gaodeditu",
      },
      {
        title: "部门扣分汇总",
        name: "OrgSumDetail",
        icon: "iconfont icon-gaodeditu",
      },
    ],
  },
  // {
  //   title: "首页",
  //   name: "Home",
  //   icon: IconHome,
  //   role: 1,
  // },
  // {
  //   title: "地图",
  //   name: "Map",
  //   icon: IconHome,
  //   role: 1,
  //   children: [
  //     {
  //       title: "高德",
  //       name: "Gd",
  //       icon: "iconfont icon-gaodeditu",
  //     },
  //     {
  //       title: "百度",
  //       name: "Bd",
  //       icon: "iconfont icon-baiduditu",
  //     },
  //     {
  //       title: "腾讯",
  //       name: "Tx",
  //       icon: "iconfont icon-hangzhengquyuguanli",
  //     },
  //   ],
  // }
];

const initRoute = () => {
  if (route.matched.length === 3) {
    openKeys.value = [route.matched[1].name as string];
  }
  selectedKeys.value = [route.name as string];
};
initRoute();

watch(
  () => route.name,
  () => {
    initRoute();
  },
  {
    immediate: true,
  }
);

const handleMenuItemClick = (key: string) => {
  // console.log("handleMenuItemClick", key);
  router.push({ name: key });
};
</script>
<style scoped lang="less">
.j-menu {
  height: calc(100vh - 90px);
  position: relative;
  &.collapsed {
    :deep(.arco-menu-collapse-button) {
      left: 48px !important;
    }
  }
  &:hover {
    :deep(.arco-menu-collapse-button) {
      opacity: 1 !important;
    }
  }
  .j-menu-inner {
    height: 100%; //防止整体出现滚动条
    overflow-y: auto;
    overflow-x: hidden;
    .arco-menu {
      position: inherit;
      // height: 100%; //防止颜色差异
      :deep(.arco-menu-collapse-button) {
        top: 50%;
        transform: translate(-50%, -50%);
        left: 240px;
        opacity: 0;
        transition: all 0.3s;
      }
    }
  }
}
</style>
